<template>
  <div class="excel-entry">
    <el-upload
      name="file"
      drag
      :show-file-list="false"
      :headers="upload.headers"
      :action="upload.action"
      :data="upload.data"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

      <el-divider />

      <div class="upload__tip">
        Excel批量导入试题功能支持：“单选题、多选题、判断题、填空题、解答题”五类题型
      </div>
      <el-row type="flex" align="middle" justify="space-between">
        <span class="upload__tip-size">支持大小在5MB以内的文件</span>
        <el-link
          type="primary"
          icon="el-icon-download"
          :underline="false"
          @click.stop="downloadFile"
        >
          下载试题模板
        </el-link>
      </el-row>
    </el-upload>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { getToken } from "@/utils/auth";
const base_url = process.env.VUE_APP_BASE_APITwo;

export default {
  inheritAttrs: false,
  props: {
    classify: {
      type: Object,
      default: () => ({}),
      require: true,
    },
  },
  data() {
    return {
      upload: {
        data: { questionKindId: this.classify.id },
        headers: { Authorization: getToken(), platform: 'WEB' },
        action: base_url + "/web/dj/question/insertQuestionTemplate",
      },
    };
  },
  methods: {
    ...mapMutations("project", ["IS_INCLUDE"]),
    beforeUpload(rawFile) {
      const isLt5M = rawFile.size / 1024 / 1024 < 5;
      if (!isLt5M) {
        this.$message.error("文件大小限制在 5MB 内!");
        return false;
      }
    },
    handleSuccess(res) {
      if (res.code === 0) {
        this.IS_INCLUDE(false);
        this.$message.success("文件上传成功");
      } else if (res.code != 0 && res.msg) {
        this.$message.error(res.msg);
      } else {
        this.$message.error("上传失败，请重试！");
      }
    },
    downloadFile() {
      let a = document.createElement("a");
      a.href = "./static/试题模板.xlsx";
      a.download = "试题模板.xlsx";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      // const uri = `/web/dj/question/downloadTemplate?Authorization=${getToken()}`;
      // window.location.href = base_url + uri;
    },
  },
};
</script>

<style lang="scss" scoped>
.excel-entry {
  display: flex;
  justify-content: center;
  padding: 100px 0;
}
::v-deep .el-upload-dragger {
  width: auto;
  height: auto;
  padding: 20px;
}
.upload__tip {
  font-size: 14px;
  margin-bottom: 12px;
  color: #999999;
}
.upload__tip-size {
  font-size: 14px;
  color: #333;
}
</style>
